<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Zebra_DatePicker examples</title>

        <link rel="stylesheet" href="public/css/reset.css" type="text/css">
        <link rel="stylesheet" href="../public/css/zebra_datepicker.css" type="text/css">
        <link rel="stylesheet" href="public/css/style.css" type="text/css">
        <link type="text/css" rel="stylesheet" href="libraries/syntaxhighlighter/public/css/shCoreDefault.css">

        <script type="text/javascript" src="public/javascript/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shCore.js"></script>
        <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shBrushJScript.js"></script>
        <script type="text/javascript" src="../public/javascript/zebra_datepicker.js"></script>
        <script type="text/javascript" src="public/javascript/functions.js"></script>

        <script type="text/javascript">
            SyntaxHighlighter.defaults['toolbar'] = false;
            SyntaxHighlighter.all();
        </script>

    </head>

    <body>

        <div class="main-wrapper">

            <h3>Zebra_DatePicker Demos</h3>

            <strong>1.</strong> A date picker with defaults settings.

            <pre class="brush:js">
            $.Zebra_DatePicker('#datepicker-example1');
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
            <input id="datepicker-example1" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <strong>2.</strong> A &#8220;future-only&#8221; date picker: dates can be selected only from the future, starting one day in the future.

            <pre class="brush:js">
            $.Zebra_DatePicker('#datepicker-example2', {
                direction: 1    // boolean true would've made the date picker future only
                                // but starting from today, rather than tomorrow
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
            <input id="datepicker-example2" type="text" ></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>3.</strong> A &#8220;future-only&#8221; date picker where dates can be selected only from the future, starting today. Also, Saturday and Sundays are always disabled.</p>

            <pre class="brush:js">
            $.Zebra_DatePicker('#datepicker-example3', {
                direction: true,
                disabled_dates: ['* * * 0,6']   // all days, all monts, all years as long
                                                // as the weekday is 0 or 6 (Sunday or Saturday)
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
            <input id="datepicker-example3" type="text" ></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>4.</strong> A &#8220;future-only&#8221; date picker where the selectable dates are in the interval starting tomorrow and ending 10 days from tomorrow.</p>

            <pre class="brush:js">
            $.Zebra_DatePicker('#datepicker-example4', {
                direction: [1, 10]
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
            <input id="datepicker-example4" type="text" ></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>5.</strong> Set the format of the returned date:</p>

            <pre class="brush:js">
            $.Zebra_DatePicker('#datepicker-example5', {
                format: 'M d, Y'
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
            <input id="datepicker-example5" type="text" ></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>6.</strong> Show week number</p>

            <pre class="brush:js">
            $.Zebra_DatePicker('#datepicker-example6', {
                show_week_number: 'Wk'
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
            <input id="datepicker-example6" type="text" ></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>7.</strong> Start with the &#8220;years&#8221; view &#8211; recommended for when users need to select their birth date. Remember that you can always switch between views by clicking in the header of the date picker between the &#8220;previous&#8221; and &#8220;next&#8221; buttons!</p>

            <pre class="brush:js">
            $.Zebra_DatePicker('#datepicker-example7', {
                view: 'years'
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
            <input id="datepicker-example7" type="text" ></div>
            </form>

            <br><br><br>

        </div>

    </body>

</html>
